<template>
  <div class="user-map">
    <!-- 筛选 -->
    <div class="option">
      <el-select v-model="platformValue" placeholder="请选择">
        <el-option
          v-for="item in platformOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="terminalValue" placeholder="请选择">
        <el-option
          v-for="item in terminalOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="numValue" placeholder="请选择">
        <el-option
          v-for="item in numOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <div class="data-message">
        <div class="message">不选择时间区间时，展示累计总数据</div>
        <el-date-picker
          v-model="dateVal"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          @change="getData"
        ></el-date-picker>
      </div>
    </div>
    <!-- 地图容器 -->
    <div class="ech">
      <div id="echarts-box"></div>
    </div>
    <!-- 图表 -->
    <div class="table">
      <el-table
        :data="provinceData"
        border
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          prop="address"
          label="省级分布"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="visitCnt"
          label="访客人数"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="visitPercent"
          label="访客在全部访客中的占比"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="loginCnt"
          label="登录用户人数"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="loginPercent"
          label="登录用户在全部登录用户中的占比"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
      <el-table
        :data="cityData"
        border
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          prop="address"
          label="市级分布"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="visitCnt"
          label="访客人数"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="visitPercent"
          label="访客在全部访客中的占比"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="loginCnt"
          label="登录用户人数"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="loginPercent"
          label="登录用户在全部登录用户中的占比"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>

      <el-table
        :data="countryData"
        border
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          prop="address"
          label="国家分布"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="visitCnt"
          label="访客人数"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="visitPercent"
          label="访客在全部访客中的占比"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="loginCnt"
          label="登录用户人数"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="loginPercent"
          label="登录用户在全部登录用户中的占比"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
// import '@/utils/china.js';
import enums from "@/config/ENUMS.js";

export default {
  data() {
    return {
      // 筛选的选项
      platformOption: enums.productLineSl,
      terminalOption: enums.terminalSl,
      numOption: [
        {
          value: "0",
          label: "访客人数",
        },
        {
          value: "1",
          label: "登录人数",
        },
      ],
      // 四个筛选
      platformValue: "jm",
      terminalValue: "all",
      numValue: "0",
      dateVal: "",
      //不能选择当前日期之后的时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > new Date().getTime() - 86400000;
        },
      },
      // 三个表格
      countryData: [],
      provinceData: [],
      cityData: [],
      // 数据
      chartData: [],
      // 最大值
      max1: 0,
      // 配置
      optionMap: {
        backgroundColor: "#fff",
        tooltip: {
          textStyle: {
            color: "#fff",
          },
          trigger: "item",
          backgroundColor: "rgba(0,0,0,.5)",
          color: "#fff",
          formatter: function (params, ticket, callback) {
            // 加params.data是防止南海诸岛那里报错
            if (params.data && params.data.children.length > 0) {
              let str =
                params.data.name +
                "：" +
                params.data.value +
                " (" +
                params.data.percent +
                ")<hr/>";
              params.data.children.forEach((item) => {
                str +=
                  item.name +
                  "：" +
                  item.value +
                  " (" +
                  item.percent +
                  ")<br/>";
              });
              return str;
            } else if (params.data) {
              return (
                params.data.name +
                "：" +
                params.data.value +
                " (" +
                params.data.percent +
                ")"
              );
            } else {
              return "";
            }
          },
        },
        //左侧小导航图标
        visualMap: {
          show: true,
          min: 0,
          max: 1000,
          left: "0",
          top: "60%",
          color: ["#184cc2", "#4198f2", "#8bc9f5", "#c2e2f5", "#ecf6fb"],
        },
        //配置属性
        series: [
          {
            name: "数量",
            type: "map",
            //地图类型，支持world，china及全国34个省市自治区
            mapType: "china",
            // 不可点击
            selectedMode: "false",
            label: {
              normal: {
                //省份名称
                show: true,
                color: "#000",
              },
            },
            itemStyle: {
              areaColor: "#fff",
              // 触发的颜色
              emphasis: {
                areaColor: "#409cff",
              },
            },
            // 选中颜色
            select: {
              itemStyle: {
                areaColor: "#409cff",
              },
            },
            //数据
            data: [],
          },
        ],
      },
    };
  },
  watch: {
    platformValue(val) {
      if (val) {
        this.getData();
      }
    },
    terminalValue(val) {
      if (val) {
        this.getData();
      }
    },
    numValue(val) {
      if (val) {
        this.getData();
      }
    },
  },
  methods: {
    // 初始化echarts
    initEcharts() {
      let myChart = echarts.init(document.getElementById("echarts-box"));
      this.optionMap.series[0].data = this.chartData;
      // this.optionMap.visualMap.max = this.max1;
      //使用制定的配置项和数据显示图表
      this.optionMap && myChart.setOption(this.optionMap);
    },
    // 转换属性
    tran(org) {
      let haveChildren = Array.isArray(org.child) && org.child.length > 0;
      return {
        name: org.address,
        value: org.userCnt,
        percent: org.percent,
        children: haveChildren ? org.child.map((i) => this.tran(i)) : [],
      };
    },
    // 得到数据
    getData() {
      // 地图数据
      this.$service
        .StatisGeo({
          os: this.terminalValue,
          pt: this.platformValue,
          userType: this.numValue,
          startDate: this.dateVal && this.dateVal[0] ? this.dateVal[0] : "",
          endDate: this.dateVal && this.dateVal[1] ? this.dateVal[1] : "",
        })
        .then((res) => {
          this.chartData = res.getGeoList.map((org) => this.tran(org));
          // 找出最大值
          this.chartData.forEach((item) => {
            if (item.value > this.max1) {
              this.max1 = item.value;
            }
          });
          this.initEcharts();
        });
      // 表格数据
      this.$service
        .StatisGeoChart({
          os: this.terminalValue,
          pt: this.platformValue,
          userType: this.numValue,
          startDate: this.dateVal && this.dateVal[0] ? this.dateVal[0] : "",
          endDate: this.dateVal && this.dateVal[1] ? this.dateVal[1] : "",
        })
        .then((res) => {
          this.countryData = res.country;
          this.provinceData = res.province;
          this.cityData = res.city;
        });
    },
  },
  created() {},
  mounted() {
    this.getData();
  },
};
</script>
<style lang="less" scoped>
.user-map {
  width: 100%;
  .option {
    text-align: center;
    /deep/ .el-select {
      margin-right: 20px;
    }
    .data-message {
      display: inline-block;
      .message {
        color: #409eff;
        font-size: 12px;
        text-align: left;
      }
    }
  }
  .ech {
    display: flex;
    justify-content: space-around;
    height: 600px;
    width: 100%;
    margin-top: 100px;
    #echarts-box {
      width: 800px;
      height: 600px;
    }
  }
  .table {
    margin: 60px;
    border-top: 1px solid #000;
    /deep/ .el-table {
      margin-top: 20px;
    }
  }
}
</style>
